<template>
	<view class="page">
		<view class="block_1">
			<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
		</view>
		<view class="block_3">
			<scroll-view scroll-view :scroll-top="scrollTop" scroll-y="true" class="block_3_3">
				<view class="block_12 flex-col">
					
					<!-- <view class="group_3 flex-row justify-end"> -->
					<view class="group_3 ">
						<view class="group_4 flex-col" v-for="(item, index) in 10" :key="index" @click="kanjiaclick()">
							<view class="box_6 flex-col">
								<image class="image_10" referrerpolicy="no-referrer" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/8d/4bb2b7c69101998ef280f881ab1626.jpg?attname=b92fe4f699ccee96.jpg_cc_100x100.jpg" />
								<!-- <text class="text_52">仅剩件</text> -->
							</view>
							<view class="text_53">
								<view class="text_jifen">
									123123
								</view>
							</view>
							<view class="text-wrapper_13">
								<view class="wrapper_left">
									<text class="text_54">￥128.00</text>
									<!-- <text class="text_55">积分</text> -->
								</view>
								<view class="text_56">剩1件</view>
							</view>
							<view class="text-wrapper_13">
								<view class="wrapper_left">
									<image style="width: 30rpx;height: 24rpx;" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/8d/4bb2b7c69101998ef280f881ab1626.jpg?attname=b92fe4f699ccee96.jpg_cc_100x100.jpg" mode=""></image>
									<text class="text_545">体鱼大平台</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "砍价",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
			};
		},
		methods: {
			kanjiaclick(){
				uni.navigateTo({
					url:'./bargain_record'
				})
			}
		},
	};
</script>
<style lang='scss'>
	@import '../static/css/common/common.scss';
	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.block_1 {
		width: 750rpx;
		height: 700rpx;
		background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/a8ebcd8059fdc81882a60faddc4d8677464fe69f.png') 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.block_3_3 {
		height: 50vh;
		overflow: auto;
		
		.block_12 {
			/* height: 787rpx; */
			min-height: 787rpx;
			/* background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/146ada552c98c04cafc679287d3dfb35c5ea64b5.png') -337rpx 0rpx no-repeat; */
			/* background-size: 1430rpx 787rpx; */
			width: 750rpx;
			position: absolute;
			left: 0;
		
			.text-wrapper_11 {
				width: 687rpx;
				height: 31rpx;
				margin: 228rpx 0 0 31rpx;
		
				.text_48 {
					width: 126rpx;
					height: 31rpx;
					overflow-wrap: break-word;
					color: rgba(50, 50, 50, 1);
					font-size: 32rpx;
					font-family: PingFang-SC-Bold;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 32rpx;
				}
		
				.text_49 {
					width: 46rpx;
					height: 23rpx;
					overflow-wrap: break-word;
					color: rgba(245, 64, 41, 1);
					font-size: 30rpx;
					font-family: PingFang-SC-Bold;
					font-weight: 700;
					text-align: left;
					white-space: nowrap;
					line-height: 24rpx;
					margin-top: 4rpx;
				}
			}
		
			.group_3 {
				/* position: relative; */
				width: 100%;
				/* height: auto; */
				min-height: 1000rpx;
				margin: 0rpx 0 10rpx 10rpx;
				/* background-color: aqua; */
		
		
		
				.group_4 {
					background-color: rgba(255, 255, 255, 1);
					border-radius: 10rpx;
					width: 335rpx;
					height: 459rpx;
					border: 1px solid rgba(229, 229, 229, 1);
					margin-left: 20rpx;
					margin-top: 20rpx;
					float: left;
		
					.box_6 {
						/* background-color: rgba(243, 243, 243, 1); */
						background-color: #fff;
						border-radius: 10px 0px 0px 10px;
						width: 330rpx;
						height: 330rpx;
						border-radius: 10rpx;
		
						.image_10 {
							width: 230rpx;
							height: 217rpx;
							margin: 0 auto;
							margin-top: 60rpx;
							/* margin: 59rpx 0 0 47rpx; */
						}
		
						.text_52 {
							width: 87rpx;
							height: 23rpx;
							overflow-wrap: break-word;
							color: rgba(190, 190, 190, 1);
							font-size: 24rpx;
							font-family: PingFang-SC-Regular;
							font-weight: NaN;
							text-align: left;
							white-space: nowrap;
							line-height: 39rpx;
							margin: 17rpx 0 19rpx 227rpx;
						}
					}
		
					.text_53 {
						width: 100%;
						height: 40rpx;
						margin: 0 0 0 20rpx;
		
						.text_jifen {
							color: rgba(51, 51, 51, 1);
							width: 300rpx;
							line-height: 28rpx;
							font-size: 28rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
		
					.text-wrapper_13 {
						width: 330rpx;
						height: 40rpx;
						font-weight: 500;
						line-height: 40rpx;
						/* background-color: aqua; */
						/* margin-top: 36rpx; */
		
						.wrapper_left {
							float: left;
							margin-left: 20rpx;
		
							.text_54 {
								/* width: 117rpx;
								height: 30rpx; */
								color: rgba(246, 32, 32, 1);
								font-size: 32rpx;
								font-weight: 500;
								line-height: 36rpx;
							}
							
							.text_545 {
								/* width: 117rpx;
								height: 30rpx; */
								color: rgba(0, 0, 0, 1.0);
								font-size: 28rpx;
								line-height: 36rpx;
							}
		
							.text_55 {
								/* width: 50rpx;
								height: 30rpx; */
								color: rgba(246, 32, 32, 1);
								font-size: 24rpx;
								font-weight: 500;
								line-height: 24rpx;
							}
						}
		
		
						.text_56 {
							width: 117rpx;
							height: 50rpx;
							color: rgba(156, 156, 156, 1.0);
							font-size: 24rpx;
							font-weight: 500;
							line-height: 50rpx;
							float: right;
							text-decoration: line-through;
							text-align: right;
							margin-right: 10rpx;
						}
		
					}
				}
		
			}
		
			.image_12 {
				position: absolute;
				left: 31rpx;
				top: -32rpx;
				width: 688rpx;
				height: 220rpx;
			}
		}
	}

</style>